<template>
    <el-upload
        class="upload-demo"
        drag
        :limit="1"
        :on-exceed="handleExceed"
        action
        :http-request="upload"
        :on-remove="handleRemove"
        :file-list="fileList"
        :before-upload="beforeAvatarUpload"
        multiple
    >
        <img
            style="width:100%;"
            v-show="fileList.length"
            v-for="item in fileList"
            :key="item.url"
            :src="item.url"
            alt
        />
        <i class="el-icon-upload" v-show="!fileList.length"></i>
        <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过1M
            <!-- <button size="mini" @click="abc(1)">预览</button> -->
        </div>
    </el-upload>
</template>
<script>
export default {
    data() {
        return {
            fileList: [],
            validWidth: 100,
            validHeight: 100
        };
    },
    methods: {
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，本次选择了 ${
                    files.length
                } 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        handleRemove(file, fileList) {
            /**删除图片钩子 */
            //   console.log(file, fileList);
            this.fileList = fileList;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;
            //   console.log(file);

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }

            //如果要验证宽高
            //this.validWidth  由上级组件传入 props 接收
            //this.validHeight 由上级组件传入 props 接收
            let validWidthAndHeight = true;
            if (this.validWidth && this.validHeight) {
                return this.valWidthAndHeight(file);
            } else return isJPG && isLt2M;
        },

        valWidthAndHeight(file) {
            let _this = this;
            return new Promise(function(resolve, reject) {
                let width = _this.validWidth; //图片宽度
                let height = _this.validHeight; //图片高度
                let _URL = window.URL || window.webkitURL;
                let image = new Image();
                image.src = _URL.createObjectURL(file);
                image.onload = function() {
                    let valid = image.width == width && image.height == height;
                    valid ? resolve() : reject();
                };
            }).then(
                () => {
                    return file;
                },
                () => {
                    this.$message.error(
                        "上传图片尺寸不符合,只能是" +
                            _this.validWidth +
                            "*" +
                            _this.validHeight +
                            "!"
                    );
                    return Promise.reject();
                }
            );
            return isSize;
        },
        upload(e) {
            /**上传 */
            let imgFile = e.file; //取到上传的图片

            let formData = new FormData(); //通过formdata上传
            formData.append("dir", "brand");
            formData.append("file", imgFile);
            //   console.log(formData);
            let url = "/upfile5";
            let that = this;
            //   let res =  posthttp.postimg("upfile5", formData);

            //   if (res.ret == 0) {
            //     let objSrc = {};
            //     this.list.imagePath = res.result.image;
            //     objSrc.url = res.result.src;
            //     objSrc.name = res.result.image;
            //     console.log(objSrc);
            //     this.list.imageSrc = objSrc.url;
            //     this.fileList.push(objSrc);
            //     this.$notify({
            //       title: "成功",
            //       message: "上传成功",
            //       type: "success"
            //     });
            //   } else {
            //     this.$notify.error({
            //       title: "错误",
            //       message: "失败"
            //     });
            //   }
        }
    }
};
</script>